<template>
  <!-- 预览表单对话框 -->
  <el-dialog
      center
      append-to-body
      destroy-on-close
      v-bind="attrs"
      v-model="show"
      class="PreviewFormDialog"
  >
    <FormRender v-if="show" :taskStatus="taskStatus" :processDefinitionId="processDefinitionId" :taskId="taskId"
                :formData="formData"
                ref="formRender"/>
  </el-dialog>
</template>
<script setup name="FormDialog">
import FormRender from '../FormRender'
import {G} from "@/views/flow/globalVar.js";
const attrs = useAttrs();
const emit = defineEmits(['update:modelValue',
  'resetForm',
  'submitForm'])
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  taskId: {
    type: String,
    default: ''
  },
  processDefinitionId: {
    type: String,
    default: ''
  },
  formData: {
    type: Object,
    default: () => {
      return undefined
    }
  },
  taskStatus: {
    type: [String, Number],
    default: () => {
      return G.TASK_STATUS.PREVIEW
    }
  }
})
const show = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue',
        val)
  }
})
</script>
<style lang="scss">
.PreviewFormDialog {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  & > * {
    width: 100%;
  }
  .el-dialog__header {
    flex: 0;
  }
  .el-dialog__body {
    flex: 0 1 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    .preview-container {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
      .el-form {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        .el-scrollbar {
        }
      }
    }
  }
}
</style>
